<template>
  <div class="node-operation-index">
    <transition name="fade" mode="out-in">
      <div v-if="ShowNodeConfig">
        <el-form
            size="small"
            label-width="100px"
            label-position="left"
        >
          <el-form-item label="节点名称" width="120px">
            <el-input v-model="node.name" placeholder="请输入节点名称" style="width: 90%">
              <template #prepend>{{ node.id + '_' + node.label }}</template>
              <template #append>
                <el-button @click="openDocBtn">打开文档</el-button>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="超时时间/ms" width="120px">
            <el-input v-model="node.NodeTimeOut" type="number" placeholder="请输入节点超时时间，大于0才生效该配置" style="width: 90%">
              <template #append>
                ms
              </template>
            </el-input>
          </el-form-item>
        </el-form>
        <component style="font-size: 12px" :is="node?.nodeType" :ref="node?.nodeType" @save="OnSaveCallback"/>
      </div>
    </transition>
    <!--    操作保存等按钮元素 -->
    <footer class="node-operation-index-footer">
      <el-button
          v-if="node?.nodeType==='LOGIC_USER_SCRIPT'"
          round
          @click="TriggerChildFunction('_PrecompiledScript')"
          size="small"
          type="warning"
      >
        预编译
      </el-button>
      <el-button size="small" type="primary" round @click="TriggerChildFunction('_SaveNode')">保存
      </el-button>
    </footer>
  </div>
</template>
<script>
import FILE_IO_READ from './file/Read.vue'
import FILE_IO_WRITE from './file/Write.vue'
import FILE_IO_COPY from './file/Copy.vue'
import PLC_READ from './plc/Read.vue'
import PLC_WRITE from './plc/Write.vue'
import MES_MachineIntegration from './mes/MachineIntegrationDialog.vue'
import MES_MiFindCustomAndSfcData from './mes/MiFindCustomAndSfcDataDialog.vue'
import MES_MiAssembleComponentsToSfc from './mes/MiAssembleComponentsDialog.vue'
import MES_DataCollectForResourceFAIServiceService from './mes/DataCollectForResourceFAIDialog.vue'
import MES_MiGetCustomerBarcodeDataServiceService from './mes/MiGetCustomerBarcodeData.vue'
import MES_MiModuleAutoInSet from './mes/MiModuleAutoInSet.vue'
import MES_GetResourceSfcServiceService from './mes/GetResourceSfcServiceService.vue'
import SERIAL_PORT from './Connector/SerialPort.vue'
import LOGIC_SWITCH from './logic/RangeConditions.vue'
import LOGIC_USER_SCRIPT from './logic/NodeScriptDialog.vue'
import LOGIC_CALCULATOR from './logic/Calculator.vue'
import LOGIC_TRIGGER_FLOW from './logic/TriggerFlow.vue'
import MES_MiReleaseSfcWithActivity from './mes/MiReleaseSfcWithActivity.vue'
import DB_MY_SQL from './database/MySql.vue'
import SOCKET_CLIENT from './Socket/Send.vue'
import { AppParams } from '@/utils/appParams'
import { Emitter } from "@/utils/Emitter";
import SystemApi from "@/api/flow/SystemApi";

export default {
  name: 'NodeOperation',
  components: {
    [AppParams.JAVA_SCRIPT_EVENT.DB_MY_SQL]: DB_MY_SQL,
    [AppParams.JAVA_SCRIPT_EVENT.SOCKET_CLIENT]: SOCKET_CLIENT,
    [AppParams.JAVA_SCRIPT_EVENT.FILE_IO_READ]: FILE_IO_READ,
    [AppParams.JAVA_SCRIPT_EVENT.FILE_IO_WRITE]: FILE_IO_WRITE,
    [AppParams.JAVA_SCRIPT_EVENT.LOGIC_TRIGGER_FLOW]: LOGIC_TRIGGER_FLOW,
    [AppParams.JAVA_SCRIPT_EVENT.LOGIC_CALCULATOR]: LOGIC_CALCULATOR,
    LOGIC_USER_SCRIPT,
    PLC_READ,
    PLC_WRITE,
    MES_MachineIntegration,
    MES_DataCollectForResourceFAIServiceService,
    MES_MiFindCustomAndSfcData,
    MES_MiAssembleComponentsToSfc,
    MES_MiGetCustomerBarcodeDataServiceService,
    MES_MiReleaseSfcWithActivity,
    MES_MiModuleAutoInSet,
    MES_GetResourceSfcServiceService,
    LOGIC_SWITCH,
    SERIAL_PORT,
    FILE_IO_COPY
  },
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      showLoggerDrawer: false,
      NodeOperationVisible: true,
      node: {
        nodeType: null,
        name: '',
        NodeTimeOut: 0
      },
      ShowNodeConfig: true
    }
  },
  methods: {
    openDocBtn () {
      new SystemApi().OpenFile(null, 'docs\\flow-examples.html')
    },
    OnSaveCallback (res) {
    },
    /**
     * 动态调用子组件内的方法
     * @param FunctionName
     * @constructor
     */
    TriggerChildFunction (FunctionName) {
      const NodeCommonInfo = this.node;
      const ElementRef = this.$refs[NodeCommonInfo.nodeType]
      if (Object.prototype.hasOwnProperty.call(ElementRef, FunctionName) && typeof ElementRef[FunctionName] === 'function') {
        ElementRef[FunctionName](NodeCommonInfo.name, NodeCommonInfo)
      }
    },
    /**
     * 节点被点击
     * 双击测显示配置 DOM
     * @param _node
     * @constructor
     */
    SetNodeConfigInfo (_node) {
      this.node = _node
      this.ShowNodeConfig = false
      this.$nextTick(() => {
        this.ShowNodeConfig = true
      })
    }
  },
  mounted () {
    Emitter.on(AppParams.JAVA_SCRIPT_EVENT.NODE_CLICK, this.SetNodeConfigInfo) // 节点被点击
  }
}
</script>

<style scoped lang="less">

.node-operation-index {
  padding: 10px;
  height: 100vh;

  .node-operation-index-footer {
    position: fixed;
    bottom: 20px;
  }
}
</style>
